<template>
  <el-form ref="form"
           :model="form"
           :rules="rules"
           label-position="left"
           label-width="0px">
    <h2>
      重置密码
      <span class="back"
            @click="back">返回登录 <i class="el-icon-right"></i></span>
    </h2>
    <p class="tipsSty">
      输入您账号的绑定邮箱，输入收到的验证码，我们将为您进行密码重置。
    </p>
    <el-form-item prop="email"
                  :rules="[
        { required: true, message: '邮箱不能为空' },
        { type: 'email', message: '不符合邮箱格式', trigger: 'blur' }
      ]">
      <el-input v-model="form.email"
                type="text"
                class="user-size"
                auto-complete="off"
                prefix-icon="el-icon-user"
                placeholder="请输入邮箱"
                @blur="emailBlur"></el-input>
    </el-form-item>
    <el-form-item prop="code">
      <div class="item-flex">
        <el-input v-model="form.code"
                  type="text"
                  placeholder="请输入验证码"
                  prefix-icon="el-icon-lock"
                  class="verificationSty">
        </el-input>
        <div style="height: 25px; border-left: 1px solid var(--prev-border-color-grey); margin-top: 10px" />
        <el-button v-if="isShowMsgCode"
                   type="text"
                   :disabled="!form.email || !emailValid"
                   style="color: var(--prev-color-primary); font-size: 14px; border: 0px; width: 110px"
                   @click="sendCode">发送验证码</el-button>
        <el-button v-if="!isShowMsgCode"
                   type="text"
                   style="color: var(--prev-color-primary); font-size: 14px; border: 0px; width: 110px"
                   disabled>{{ showTime }}秒后重新发送</el-button>
      </div>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="form.password"
                type="password"
                class="password-size"
                auto-complete="off"
                show-password
                prefix-icon="el-icon-lock"
                placeholder="请输入新密码"
                @input="onInput(form.password)"
                @blur="loseBlur"></el-input>
      <password-intensity :is-feeble="isFeeble"
                          :is-middle="isMiddle"
                          :is-strong="isStrong"></password-intensity>
    </el-form-item>
    <el-form-item prop="confirmPassword">
      <el-input v-model="form.confirmPassword"
                type="password"
                class="password-size"
                auto-complete="off"
                show-password
                prefix-icon="el-icon-lock"
                placeholder="请确认新密码"
                @input="newOnInput(form.confirmPassword)"
                @blur="newLoseBlur"></el-input>
      <password-intensity :is-feeble="isNewFeeble"
                          :is-middle="isNewMiddle"
                          :is-strong="isNewStrong"></password-intensity>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button type="primary"
                 style="width: 100%; height: 45px"
                 :loading="loading"
                 @click="handleSubmit()">确 定
      </el-button>
    </el-form-item>
    <p>
      <span style="cursor: pointer;">如有疑问请联系公司管理员
      </span>
      <!-- <a href="">，联系物流源</a> -->
      <!-- <el-tooltip placement="top">
        <div slot="content">
          如果上述验证方式均无法正常使用，您可以选择人工申诉，物流源将处理；
          <br />此种方式的应用场景：原绑定手机/邮箱停用，或是原管理员离职、忘记密码，需要物流源处理。
          <br />物流源审核同意申诉，将绑定新手机至管理员账号。
        </div>
        <span class="c-primary"><i class="el-icon-question"></i></span>
      </el-tooltip> -->
    </p>
  </el-form>
</template>

<script>
import { tenant } from "@/api/index";
import PasswordIntensity from "@/components/public/PasswordIntensity";
import password from "@/libs/password";
export default {
  name: "ForgetPassword",
  components: { PasswordIntensity },
  mixins: [password],
  props: {
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      form: {
        code: "",
        email: null,
        password: null,
        confirmPassword: null
      },
      showTime: null,
      isShowMsgCode: true,
      rememberMe: false,
      // loading: false,
      rules: {
        // email: [{ required: true, message: '邮箱不能为空', trigger: "blur", },
        // { type: 'email', message: '不符合邮箱格式', trigger: 'change' }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        confirmPassword: [
          { required: true, message: "请输入密码", trigger: "blur" }
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      },
      emailValid: false
    };
  },
  mounted () {
    // this.data.username = this.$storage.read("LOGIN::username");
  },
  methods: {
    home () {
      window.open('http://www.wlyuan.com.cn/', '_bank')
    },
    emailBlur () {
      this.$refs.form.validateField("email", (emailValid) => {
        if (!emailValid) {
          this.emailValid = true;
        }
      });
    },
    async sendCode () {
      this.sendOutTime();
      let { code, message } = await tenant.forgetPasswordCode({
        email: this.form.email
      });

      this.$message[code === 0 ? "success" : "error"](message);
    },
    handleSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.password !== this.form.confirmPassword) {
            return this.$message({ message: "两次密码输入不一致", type: "warning" });
          }
          if (this.form.password.length < 6 || this.form.password.length > 20) {
            return this.$message({ message: "密码长度6-20位", type: "warning" });
          }
          if (this.isNewFeeble) {
            return this.$message({ message: "密码强度不够，至少要包含数字，字母，特殊字符三项中两项！", type: "warning" });
          }
          this.updatePassword();
        } else {
          return false;
        }
      });
    },
    sendOutTime () {
      this.isShowMsgCode = false;
      this.showTime = 60;
      const authTimeTimer = setInterval(() => {
        this.showTime--;
        if (this.showTime <= 0) {
          this.isShowMsgCode = true;
          clearInterval(authTimeTimer);
        }
      }, 1000);
    },
    async updatePassword () {
      let postData = JSON.parse(JSON.stringify(this.form));
      postData.password = this.$md5(postData.password);
      postData.confirmPassword = this.$md5(postData.confirmPassword);
      let { code, message } = await tenant.forgetPassword(postData);
      this.$message[code === 0 ? "success" : "error"](message);
      this.back();
    },
    back () {
      this.$emit("back", false);
    }
  }
};
</script>

<style lang="scss" scoped>
label.el-checkbox.rememberme {
  margin: 0px 0px 15px;
  text-align: left;
}
.user-size >>> .el-input__prefix {
  font-size: 16px;
}
.password-size >>> .el-input__prefix {
  font-size: 16px;
}
.codeBtn {
  position: absolute;
  right: 9px;
  &:before {
    content: "";
    height: 22px;
    background-color: var(--prev-border-color-grey);
    position: absolute;
    left: -10px;
    top: 4px;
    width: 1px;
  }
}
.back {
  font-weight: 400;
  font-size: 14px;
  color: #128bed;
  float: right;
  cursor: pointer;
}
.item-flex {
  display: flex;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
/deep/ .el-input__inner {
  font-size: 16px;
  height: 45px !important;
}
.verificationSty {
  /deep/ .el-input__inner {
    font-size: 16px;
    height: 45px !important;
    border: 0px;
  }
  width: 237px;
}
h2 {
  font-size: 20px;
}
p {
  font-size: 14px;
  color: var(--prev-border-color-lightgrey);
}
.tipsSty {
  font-size: 12px;
  color: var(--prev-border-color-lightgrey);
  margin-top: -10px;
  margin-bottom: 25px;
}
</style>
